<template>
	<div class="menu_list">
		<head-title title="系统--系统菜单"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left"></div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<div class="add"><el-button type="primary" @click="addCatalog(1, 0)">添加</el-button></div>
				</div>
			</div>
			<p style="height:30px"></p>
			<el-table :data="menuList" border row-key="admin_menu_id" :tree-props="{ children: 'children' }">
				<el-table-column label="名称" align="center" prop="title"></el-table-column>
				<el-table-column label="图标" align="center" prop="">
					<template slot-scope="scope">
						<i class="iconfont" :class="scope.row.icon"></i>
					</template>
				</el-table-column>
				<el-table-column label="类型" align="center" prop="type_name"></el-table-column>
				<el-table-column label="路由" align="center" prop="link"></el-table-column>
				<el-table-column label="排序" align="center" prop="sort"></el-table-column>
				<el-table-column label="上下架" align="center" width="180">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.admin_menu_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="280">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" v-if="scope.row.parent_id == 0" @click="addCatalog(2, scope.row.admin_menu_id)">新增</el-button>
						<el-button type="primary" size="mini" @click="edit(scope.row.admin_menu_id)">编辑</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.admin_menu_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 编辑菜单弹框 -->
		<el-dialog :title="title" :close-on-click-modal="false" :visible.sync="menuDialog" center :modal-append-to-body="false" width="680px">
			<el-form :model="menuInfo" :rules="menuFormRules" ref="menuInfo">
				<div class="menu-dialog">
					<el-form-item label="名称:" prop="title"><el-input v-model="menuInfo.title" placeholder="请输入内容"></el-input></el-form-item>
					<el-form-item label="路由:" prop="link"><el-input v-model="menuInfo.link" placeholder="请输入内容"></el-input></el-form-item>
					<el-form-item label="图标:" prop="icon"><el-input v-model="menuInfo.icon" placeholder="请输入图标"></el-input></el-form-item>
					<el-form-item label="排序:" prop="sort"><el-input v-model="menuInfo.sort" placeholder="请输入内容"></el-input></el-form-item>
					<el-form-item label="上下架:" prop="status"><el-switch v-model="menuInfo.status" :active-value="1" :inactive-value="2"></el-switch></el-form-item>
				</div>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button
					@click="
						menuDialog = false;
						$refs['menuInfo'].clearValidate();
					"
				>
					取 消
				</el-button>
				<el-button type="primary" @click="confirmClick('menuInfo')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			options: [
				{
					value: 'icon-yonghu'
				},
				{
					value: 'icon-yonghu'
				},
				{
					value: 'icon-yonghu'
				},
				{
					value: 'icon-yonghu'
				},
				{
					value: 'icon-yonghu'
				},
				{
					value: 'icon-yonghu'
				},
				{
					value: 'icon-yonghu'
				},
				{
					value: 'icon-yonghu'
				},
				{
					value: 'icon-yonghu'
				},
				{
					value: 'icon-yonghu'
				},
				{
					value: 'icon-yonghu'
				},
				{
					value: 'icon-yonghu'
				},
				{
					value: 'icon-yonghu'
				},
				{
					value: 'icon-yonghu'
				},
				{
					value: 'icon-yonghu'
				},
				{
					value: 'icon-yonghu'
				},
				{
					value: 'icon-yonghu'
				}
			],
			type: '',
			title: '',
			menuList: [], // 菜单列表
			menuInfo: {
				title: '',
				link: '',
				icon: '',
				status: 2,
				sort: ''
			},
			menuDialog: false,
			menuFormRules: {
				title: [{ required: true, message: '请输入名称' }],
				link: [{ required: true, message: '请输入路由' }],
				icon: [{ required: true, message: '请输入图标' }],
				sort: [{ required: true, message: '请输入排序' }]
			}
		};
	},
	methods: {
		// 初始化列表
		init() {
			this.$http(this.$ApiList.MenuList).then(res => {
				this.menuList = [];
				let menuList = [];
				res.datas.forEach(a => {
					if (a.type == 1) {
						a.type_name = '目录';
					} else {
						a.type_name = '菜单';
					}
					menuList.push(a);
				});
				menuList.forEach(a => {
					let children = [];
					if (a.parent_id == 0) {
						menuList.forEach(b => {
							if (b.parent_id == a.admin_menu_id) {
								children.push(b);
								a.children = children;
							}
						});
						this.menuList.push(a);
					}
				});
			});
		},
		edit(admin_menu_id) {
			this.type = 1;
			this.title = '编辑菜单';
			let data = {
				admin_menu_id: admin_menu_id
			};
			this.$http(this.$ApiList.MenuInfo, data).then(res => {
				if (res.code == 200) {
					this.menuInfo = res.datas.info;
					this.menuDialog = true;
				}
			});
		},
		addCatalog(type, parent_id) {
			this.type = 0;
			this.menuInfo = {
				title: '',
				link: '',
				icon: '',
				status: 1,
				sort: 0,
				parent_id: parent_id
			};
			if (type == 1) {
				this.title = '添加目录';
				this.menuInfo.link = '#';
			} else {
				this.title = '新增菜单';
				this.menuInfo.link = '/';
				this.menuInfo.icon = 'icon-arrow-right-copy-copy';
			}
			this.menuInfo.type = type;
			this.menuDialog = true;
		},
		//提交
		confirmClick(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					console.log(this.menuInfo);
					if (this.type == 0) {
						this.$http(this.$ApiList.MenuAdd, this.menuInfo).then(res => {
							if (res.code == 200) {
								this.$layer.msg('添加成功');
								this.init();
								this.menuDialog = false;
							}
						});
					} else if (this.type == 1) {
						this.$http(this.$ApiList.MenuEdit, this.menuInfo).then(res => {
							if (res.code == 200) {
								this.$layer.msg('编辑成功');
								this.init();
								this.menuDialog = false;
							}
						});
					}
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		// 上下架
		upDown(e, admin_menu_id) {
			let data = {
				admin_menu_id: admin_menu_id
			};
			data.status = e;
			this.$http(this.$ApiList.MenuDown, data).then(res => {
				if (res.code == 200) {
					this.$layer.msg('操作成功');
					this.init();
				}
			});
		},
		del(admin_menu_id) {
			let data = {
				admin_menu_id: admin_menu_id
			};
			this.$confirm('确定删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$http(this.$ApiList.DelMenu, data).then(res => {
						if (res.code == 200) {
							this.$layer.msg('删除成功');
							this.init();
						}
					});
				})
				.catch(() => {});
		},
		refreshPage() {
			this.init()
		}
	},
	created() {
		this.init();
	}
};
</script>
<style lang="scss">
.menu_list {
	.menu-dialog .el-input {
		width: 90%;
	}
	/* 表头颜色 */
	.el-table thead th {
		background-color: #fff !important;
		color: #333;
	}
}
</style>
